<form class="form-horizontal" role="form" id="form" enctype="multipart/form-data">
    <div class="row">
        <div class="col-md-12">
            <h3 class="header smaller lighter blue">
                申请人基本信息
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right">姓名</label>
                <div class="col-md-3">
                    <input type="text" name="name" id="name" class="required"/>
                </div>
                <label class="col-md-1 control-label no-padding-right">身份证号</label>
                <div class="col-md-3">
                    <input type="text" name="idNo" id="idNo" class="required"/>
                </div>
                <label class="col-md-1 control-label no-padding-right">手机号码</label>
                <div class="col-md-3">
                    <input type="text" name="mobileNo" id="mobileNo" class="required"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right">放款银行卡</label>
                <div class="col-md-3">
                    <input type="text" name="bankCardNo" id="bankCardNo" class="required"/>
                </div>
                <label class="col-md-1 control-label no-padding-right">银行名称</label>
                <div class="col-md-3">
                    <input type="text" name="bankCardName" id="bankCardName" class="required"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right" for="marry">婚姻状况</label>
                <div class="col-md-3">
                    <select class="input-medium" name="marry" id="marry">
                        <option value="">&nbsp;</option>
                    </select>
                </div>
                <label class="col-md-1 control-label no-padding-right">所在城市</label>
                <div class="col-md-7">
                    <select class="input-small province" name="province" id="province">
                        <option value="">&nbsp;</option>
                    </select>
                    <select class="input-small" name="city" id="city">
                        <option value="">&nbsp;</option>
                    </select>
                    <select class="input-small" name="region" id="region">
                        <option value="">&nbsp;</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right" for="houseType">住宅性质</label>
                <div class="col-md-3">
                    <select class="input-medium" name="houseType" id="houseType">
                        <option value="">&nbsp;</option>
                    </select>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="companyType"> 单位性质 </label>
                <div class="col-md-3">
                    <select class="input-medium" name="companyType" id="companyType">
                        <option value="">&nbsp;</option>
                    </select>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="workType">职业类型</label>
                <div class="col-md-3">
                    <select class="input-medium" name="workType" id="workType">
                        <option value="">&nbsp;</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <h3 class="header smaller lighter blue">
                联系人信息
            </h3>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right" for="friendName1"> 姓名 </label>
                <div class="col-md-3">
                    <input type="text" name="friendName1" id="friendName1"/>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="friendMobileNo1"> 手机号码 </label>
                <div class="col-md-3">
                    <input type="text" name="friendMobileNo1" id="friendMobileNo1"/>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="friendShip1"> 与申请人关系 </label>
                <div class="col-md-3">
                    <select class="input-medium" name="friendShip1" id="friendShip1">
                        <option value="">&nbsp;</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right" for="friendName2"> 姓名 </label>
                <div class="col-md-3">
                    <input type="text" name="friendName2" id="friendName2"/>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="friendMobileNo2"> 手机号码 </label>
                <div class="col-md-3">
                    <input type="text" name="friendMobileNo2" id="friendMobileNo2"/>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="friendShip2"> 与申请人关系 </label>
                <div class="col-md-3">
                    <select class="input-medium" name="friendShip2" id="friendShip2">
                        <option value="">&nbsp;</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="row showItem">
        <div class="col-md-12">
            <h3 class="header smaller lighter blue">
                资料清单
            </h3>
        </div>
    </div>

    <div class="row">
        <div class="form-group">
            <div class="col-xs-3" id="fileDiv">
                <input type="file" id="file" name="file"/>
            </div>
            <div class="col-xs-3">
                <select class="input-medium" name="fileType" id="fileType">
                    <option></option>
                </select>
                <input type="button" value="上传资料" style="width: 80px" class="btn btn-xs btn-primary" onclick="uploadFile()">
            </div>

        </div>
    </div>
    <div class="row showItem">
        <div class="col-xs-12">
            <table id="fileTable" class="table table-striped table-bordered table-hover" width="100%">
                <thead>
                <tr>
                    <th class="center">资料名称</th>
                    <th class="center">资料类型</th>
                    <th class="center">上传人</th>
                    <th class="center">上传时间</th>
                    <th class="center">查看</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div><!-- /.span -->
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="clearfix form-actions">
                <div class="col-md-offset-5 col-md-9">
                    <input type="submit" id="submit" value="提交" style="width: 80px"  class="btn btn-primary">
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="userId" value="<%=userId%>">
</form>

<script src="/js/jquery.validate.min.js"></script>
<script src="/js/messages_zh.js"></script>
<script src="/js/common/form.js"></script>
<script src="/js/common/region.js"></script>
<script src="/js/common/dict.js"></script>

<script>
    var fileTable;
    $(document).ready(function() {
        $('#form').validate();
        $('#file').ace_file_input({
            no_file:'请选择文件',
            btn_choose:'选择',
            btn_change:'重新选择',
            droppable:false,
            onchange:null,
            thumbnail:false //| true | large
            //whitelist:'gif|png|jpg|jpeg'
            //blacklist:'exe|php'
            //onchange:''
            //
        });


        $.get('/user/customer/form_data?userId=<%=userId%>', function(data){


            fillSelectDict('marry', data.marry);
            fillSelectDict('houseType', data.houseType);
            fillSelectDict('companyType', data.companyType);
            fillSelectDict('workType', data.workType);
            fillSelectDict('friendShip1', data.friendShip);
            fillSelectDict('friendShip2', data.friendShip);

            $('#name').val(data.customer.name);
            $('#idNo').val(data.customer.idNo);
            $('#mobileNo').val(data.customer.mobileNo);
            $('#friendName1').val(data.customer.friendName1);
            $('#friendMobileNo1').val(data.customer.friendMobileNo1);
            $('#friendName2').val(data.customer.friendName2);
            $('#friendMobileNo2').val(data.customer.friendMobileNo2);
            $('#bankCardNo').val(data.customer.bankCardNo);
            $('#bankCardName').val(data.customer.bankCardName);
            $('#marry').val(data.customer.marry);
            $('#companyType').val(data.customer.companyType);
            $('#houseType').val(data.customer.houseType);
            $('#workType').val(data.customer.workType);
            $('#friendShip1').val(data.customer.friendShip1);
            $('#friendShip2').val(data.customer.friendShip2);

            var region = data.region;
            initAreaAll(region, 'province', 'city', 'region', data.customer.province, data.customer.city, data.customer.region);

            fillSelectDict('fileType', data.fileType);
        });

        fileTable = $('#fileTable').DataTable({
            "processing": true,
            "lengthChange": false,
            "filter": false,
            //开启服务器模式
            //serverSide: true,
            //数据来源（包括处理分页，排序，过滤） ，即url，action，接口，等等
            ajax: '/common/file/user_file_list?userId=<%=userId%>',
            columns: [
                { data: 'fileName', className: 'center' },
                { data: 'fileType', className: 'center' },
                { data: 'uploadName', className: 'center' },
                { data: 'createTime', className: 'center' },
                { data: 'fileUrl', className: 'center' }
            ],
            columnDefs: [{
                "render": function ( data, type, row, meta ) {
                    return '<input type="button" value="查看" style="width: 80px" class="btn btn-minier btn-primary" onclick="showFile(\'' + data + '\')">&nbsp;&nbsp;&nbsp;' +
                        '<input type="button" value="删除" style="width: 80px" class="btn btn-minier btn-primary editItem" onclick="deleteFile(\'' + data + '\',\'<%=userId%>\')">';
                },
                "targets": 4
            }],
            "initComplete": function(settings, json) {
                // showListData(data);
            }
        });
    });

    function showFile(fileUrl){
        $.get('/common/file/file_download?fileUrl=' + fileUrl, function(data,status){
            window.open(data);
        });
    }

    function deleteFile(fileUrl, userId){
        $.ajax({
            url: '/user/customer/file_delete',
            type: 'post',
            data: {fileUrl:fileUrl,userId:userId},
            success:function(data){
                alert('提交成功');
                fileTable.ajax.reload();
            }
        });
    }

    function doSubmit(){
        $.ajax({
            url: "/user/customer/form_save",
            type: "POST",
            data: $("#form").serialize(),
            success:function(data){
                if(data.code=='0'){
                    alert("提交成功");
                    $(location).attr('href', '/user/customer/list?menuId=<%=menuId%>');
                }else {
                    $('#submit').attr("disabled",false);
                    alert(data.message);
                }
            }
        });
    }


    function uploadFile() {
        var files = document.getElementById('file').files; //files是文件选择框选择的文件对象数组
        if(files.length == 0) return;

        var formData = new FormData();
        formData.append('file', files[0]);
        formData.append('userId', '<%=userId%>');
        formData.append('fileType', $('#fileType').val());

        $.ajax({
            url: "/user/customer/file_upload",
            type: "POST",
            data: formData,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
            success: function(response,status,xhr){
                alert('上传成功');
                fileTable.ajax.reload();
            }
        });
    }
</script>